<template>
  <div class="relative">
    <DropdownMenu placement="bottom-end" trigger="hover" :offset="8">
      <template #trigger>
        <div class="relative cursor-pointer p-1.5 sm:p-1 rounded-lg hover:bg-background-800 transition-colors duration-normal">
          <svg
            class="w-5 h-5 sm:w-6 sm:h-6 text-text-primary"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
          >
            <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
          </svg>
          <!-- 未读消息数量指示器 -->
          <div 
            v-if="unreadCount > 0"
            class="absolute -top-1 -right-1 w-4 h-4 sm:w-5 sm:h-5 bg-error text-white text-xs rounded-full flex items-center justify-center font-bold animate-pulse"
          >
            {{ unreadCount > 99 ? '99+' : unreadCount }}
          </div>
          
          <!-- 新消息提醒小红点 -->
          <div 
            v-if="unreadCount > 0"
            class="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 sm:w-3 sm:h-3 bg-error rounded-full animate-ping"
          ></div>
        </div>
      </template>

              <DropdownMenuItem @click="$router.push('/messages')">
          <div class="flex items-center">
            <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
            <span>消息中心</span>
          </div>
        </DropdownMenuItem>
        
        <DropdownMenuItem 
          v-if="unreadCount > 0"
          @click="markAllAsRead"
          :disabled="markingAllAsRead"
        >
          <div class="flex items-center">
            <svg class="w-4 h-4 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>{{ markingAllAsRead ? '处理中...' : '全部已读' }}</span>
          </div>
        </DropdownMenuItem>
    </DropdownMenu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMessages } from '../../composables/useMessages'
import { DropdownMenu, DropdownMenuItem } from '../ui'

// Props
interface Props {
  unreadCount: number
}

const props = defineProps<Props>()

// Router
const router = useRouter()

// 使用消息composable
const { 
  markAllAsRead: markAllAsReadApi,
  updateUnreadCount
} = useMessages()

// 状态
const markingAllAsRead = ref(false)

// 标记所有消息为已读
const markAllAsRead = async () => {
  markingAllAsRead.value = true
  try {
    const result = await markAllAsReadApi()
    if (result.success) {
      // 显示成功提示
      const { useUiStore } = await import('../../store/useUiStore')
      const uiStore = useUiStore()
      uiStore.showSuccess('所有消息已标记为已读')
      await updateUnreadCount()
    } else {
      // 显示错误提示
      const { useUiStore } = await import('../../store/useUiStore')
      const uiStore = useUiStore()
      uiStore.showError(result.error || '标记失败')
    }
  } finally {
    markingAllAsRead.value = false
  }
}


</script>


